<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="reportTitle" value="PECVD不良分布报表" scope="session"/>

<%@ include file="/common/report_head.jsp" %>
<%@ include file="/condition/sartTime_input.html"%>
<%@ include file="/condition/endTime_input.html"%>
<%@ include file="/condition/line_sumo.html"%>
<%@ include file="/condition/tool_sumo.html"%>
<%@ include file="/condition/pipeNumber_sumo.html"%>
<%@ include file="/condition/zhNumber_sumo.html"%>
<%@ include file="/condition/zhCount_sumo.html"%>
<%@ include file="/condition/zhPlace_sumo.html"%>

<%@ include file="/common/report_middle.jsp" %>
<%@ include file="/charts-grid/echarts2.html"%>
<div class="col-md-12" style="height: 150px;margin-bottom: 25px;">
    <div id="pqGrid"></div>
</div>
<div class="col-md-12" style="height: 420px;margin-bottom: 25px;">
    <div id="pqGrid_detail"></div>
</div>
<%@include file="/common/report_end.jsp" %>


<script>
    $(document).ready(function () {
        $("title").text("PECVD不良分布报表");

        $('#query_btn').click(function (){
            initGridAndChart();
            ajax('/jn-report/report/pecvd_5_report.do' ,loadConditionMapData(), true, ajax_successful);

            function ajax_successful(outTrxObj) {
                if(outTrxObj.gridData.length < 1) { showMessengerDialog("数据查询为空"); return false; }

                //Chart图数据
                if ($("#charts").length > 0) {
                    var echartsData = outTrxObj.chartsData;
                    option.title.text = echartsData.title;
                    option.legend.data = [];
                    option.legend.data = echartsData.legendData;
                    option.grid.bottom = '20%';
                    option.xAxis[0].data = [];
                    option.xAxis[0].data = echartsData.xAxisData;
                    option.xAxis[0].axisLabel = {
                        rotate:35,
                        interval: 0,
                        formatter: function(params) {
                        if (params.length > 6) {
                            params = params.substr(0, 6) + "...";
                        } else {
                            params = params;

                        }
                        return params;
                    }
                    };
                    option.yAxis = [];
                    option.yAxis = [
                        {
                            type: 'value',
                            max: 'dataMax',
                            splitLine:{show:false},
                            axisLabel: {formatter: '{value} %'}
                        }
                    ];
                    option.series = [];
                    //柱状图
                    option.series.push({
                        name: echartsData.legendData[0],
                        type: 'bar',
                        yAxisIndex: 0,
                        data: echartsData.bar_seriesDatas[0],
                        barMaxWidth : 30,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#51B38F'},
                                        {offset: 0.5, color: '#44AE94'},
                                        {offset: 1, color: '#45AA82'}
                                    ]
                                )
                            }
                        }
                    });
                    //线别折线图
                    option.series.push({
                        name: echartsData.legendData[1],
                        type: 'line',
                        yAxisIndex: 0,
                        data: echartsData.line_seriesDatas[0],
                        itemStyle: {
                            normal: {lineStyle: {color: '#B33E65'}}
                        },
                        label: {
                            normal: {
                                show: true,
                                distance: 5,
                                color: 'black',
                                fontWeight: 'bold',
                                formatter: '{c}%'
                            }
                        },
                        animationDelay: function (idx) {
                            return idx * 10 + 100;
                        }
                    });
                    option.backgroundColor = 'white';
                    option.grid.show = false;
                    myChart.clear();
                    myChart.setOption(option);
                }

                //grid表格数据
                if ($("#pqGrid").length > 0) {
                    var colM =[{halign:"center",align:'center', dataIndx: 'rate_type', title: '', width: 150, editable: false, sortable: true}];
                    for (var i=0; i<outTrxObj.dynamicColumn.length; i++){
                        var column = outTrxObj.dynamicColumn[i];
                        colM.push({halign:'center', align:'center', dataIndx: column, title: column, width: 120, editable: false, sortable: true});
                    }
                    _pqUtil.f.setColModel($("#pqGrid"), colM);
                    _pqUtil.f.seTitle($("#pqGrid"), "PECVD不良分布报表-不良分布明细数据");
                    _pqUtil.f.isShowTitle($("#pqGrid"), false);
                    _pqUtil.f.loadPqGridData($("#pqGrid"), outTrxObj.dynamicColumnJsonGridData);

                }

                //grid明细表格数据
                if ($("#pqGrid_detail").length > 0) {
                    var detail_colM = [
                        {halign:"center",align:'center', dataIndx: 'bad_desc',	             title: '不良名称',     width: 220, editable: false, sortable: true},
                        {halign:"center",align:'center', dataIndx: 'bad_count',      	     title: '计数',         width: 220, editable: false, sortable: true},
                        {halign:"center",align:'center', dataIndx: 'bad_percent',    	     title: '不良比例',     width: 220, editable: false, sortable: true},
                        {halign:"center",align:'center', dataIndx: 'cumulative_bad_percent', title: '累计不良比例', width: 220, editable: false, sortable: true}
                    ];
                    _pqUtil.f.setColModel($("#pqGrid_detail"), detail_colM);
                    _pqUtil.f.seTitle($("#pqGrid_detail"), "PECVD不良分布报表-不良分布明细数据");
                    _pqUtil.f.isShowTitle($("#pqGrid_detail"), false);
                    _pqUtil.f.loadPqGridData($("#pqGrid_detail"), outTrxObj.gridData);
                }
            }
        });

    });
</script>
